{% extends "../layouts/_base.njk" %}
{% block title %}
  公告板 Button
{% endblock %}
{% block js_head %}
    <script src="/js/libs/core/packages/toast.js"></script>
{% endblock %}
{% block content %}

    <div id="myToast" class="app-toast">
        <div class="app-toast-text">提示内容222</div>
    </div>
    <div class="app-main demo">
        <div class="row">
            <div class="col-12">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>基础用法</h4>
                    </div>
                    <div class="app-card-content">
                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>通过<code>data</code>属性来主动触发</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
<div class="row">
    <div class="col">
        <button type="button" class="btn btn-default btn-lg" data-target="#myToast" data-toggle="toast">文字提示 - 居中</button>
    </div>
</div>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>通过<code>App.toast</code>来调用</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
<div class="row">
    <div class="col">
        <button type="button" class="btn btn-primary btn-lg" id="demoCall">JS 调用 - top - right</button>
    </div>
</div>
<script>
    $('#demoCall').on('click', function (e) {
        App.toast({
            position: 'top-right'
        })
    })
</script>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>普通调用</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
<div class="row">
    <div class="col">
        <button type="button" class="btn btn-default btn-lg" data-message="普通提示" data-position="top-right" data-toggle="toast">普通提示 top - right</button>
    </div>
</div>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>长文字提示样式</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
<div class="row">
    <div class="col">
        <button type="button"
            class="btn btn-default btn-lg"
            data-position="top-right"
            data-toggle="toast"
            data-message="这是一条长文字提示，超过一定字数就会换行"
        >长文字提示 top - right</button>
    </div>
</div>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>

                        <div class="demo-row demo-code">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col">
                                        <ol>
                                            <li><h6>通过<code>jQuery</code>插件方式调用</h6></li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="code-source">
<div class="row">
    <div class="col">
        <button type="button" data-toast="1" class="btn btn-default btn-lg" id="demoPlugins">jQuery插件方式 top - right</button>
    </div>
</div>
<script>
    $('#demoPlugins').toast({
        message: '我是一个兵，来自老百姓',
        position: 'top-right'
    })
</script>
                                </div>
                                <!--/code-source-->
                            </div>
                        </div>

                    </div>
                    <!--/demo-code-->
                </div>
            </div>
        </div>
        <!--/row-->

        <div class="row">
            <div class="col-12">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>高级用法</h4>
                    </div>
                    <div class="app-card-content">
                        <div class="row demo-code">
                            待开发中...
                        </div>

                    </div>
                    <!--/demo-code-->
                </div>
            </div>
        </div>
        <!--/row-->

    </div>
    <!--/body-->
{% endblock %}
{% block js_footer %}
{% endblock %}